﻿// create a mask to overlap current web page.
// backgroundMaskId: id of client control to mask the background of web page. null value indicates no background mask needed.
// centrelizedDialogId: id of client dialog to position at the center of web page.
// author: eunge liu (eunge.liu@RapidWebDev.org)
// $Id: $

var webpageMask = function(backgroundMaskId, centrelizedDialogId)
{
    var backgroundMaskId = backgroundMaskId;
    var centrelizedDialogId = centrelizedDialogId;
    
    function getClientBounds()
    {
        var clientWidth;
        var clientHeight;
        switch(Sys.Browser.agent) {
            case Sys.Browser.InternetExplorer:
                clientWidth = document.documentElement.clientWidth;
                clientHeight = document.documentElement.clientHeight;
                break;
            case Sys.Browser.Safari:
                clientWidth = window.innerWidth;
                clientHeight = window.innerHeight;
                break;
            case Sys.Browser.Opera:
                clientWidth = Math.min(window.innerWidth, document.body.clientWidth);
                clientHeight = Math.min(window.innerHeight, document.body.clientHeight);
                break;
            default:  // Sys.Browser.Firefox, etc.
                clientWidth = Math.min(window.innerWidth, document.documentElement.clientWidth);
                clientHeight = Math.min(window.innerHeight, document.documentElement.clientHeight);
                break;
        }

        return new Sys.UI.Bounds(0, 0, clientWidth, clientHeight);
    }

    function resizeElements()
    {
        var clientBounds = getClientBounds();
        var clientWidth = clientBounds.width;
        var clientHeight = clientBounds.height;

        if(backgroundMaskId!=null && backgroundMaskId.length > 0)
        {
            var bg = $get(backgroundMaskId);    
            bg.style.width = Math.max(Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), clientWidth) + 'px';
            bg.style.height = Math.max(Math.max(document.documentElement.scrollHeight, document.body.scrollHeight), clientHeight) + 'px';
        }
        
        var scrollLeft = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
        var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);            
        var dialogLeft = scrollLeft + Math.max(Math.max(document.documentElement.scrollWidth, document.body.scrollWidth), clientWidth) / 2 - 50;
        var dialogTop = scrollTop + clientHeight / 2 - 50;
        var dialog = $get(centrelizedDialogId);
        dialog.style.left = dialogLeft + "px";
        dialog.style.top = dialogTop + "px";
    }
    
    this.register = function()
    {
        $(window).scroll(function() { resizeElements(); });
        $(window).resize(function() { resizeElements(); });
        $(window).load(function() { resizeElements(); });
    }
}